import React from 'react';
import {Button, Space, Table, Tag} from 'antd';
import {ShippingResult} from "@/models/shippingResult";
import {query} from '@/services/excelHandle';


// @ts-ignore
const columns = [
  {
    title: 'chargeItemNo',
    dataIndex: 'chargeItemNo'
  },
  {
    title: 'itemId',
    dataIndex: 'itemId',
    render: (text: string) => <a>{text}</a>,
  },
  {
    title: 'itemDetail',
    dataIndex: 'itemDetail'
  },
  {
    title: 'type',
    dataIndex: 'type'
  },
  {
    title: 'partner',
    dataIndex: 'partner'
  },
  {
    title: 'qty',
    dataIndex: 'qty'
  },
  {
    title: 'unit',
    dataIndex: 'unit'
  },
  {
    title: 'unitPrice',
    dataIndex: 'unitPrice'
  },
  {
    title: 'discount',
    dataIndex: 'discount'
  },
  {
    title: 'amount',
    dataIndex: 'amount'
  },
  {
    title: 'agentAbbr',
    dataIndex: 'agentAbbr'
  },
  {
    title: 'agentName',
    dataIndex: 'agentName'
  },
  {
    title: 'payerAbbr',
    dataIndex: 'payerAbbr'
  },
  {
    title: 'payerName',
    dataIndex: 'payerName'
  },
  {
    title: 'generateSign',
    dataIndex: 'generateSign'
  },
  {
    title: 'validTag',
    dataIndex: 'validTag'
  },
  {
    title: 'taxRate',
    dataIndex: 'taxRate'
  },
  {
    title: 'netPrice',
    dataIndex: 'netPrice'
  },
  {
    title: 'tax',
    dataIndex: 'tax'
  },
  {
    title: 'Tag',
    key: 'tag',
    dataIndex: 'tag',
    render: (tag: string) => {
      return (
        <Tag color={tagColorMap.get(tag)} key={tag}>{tag}</Tag>
      )
    }
  },
  {
    title: 'Action',
    key: 'action',
    render: (text: string, record: ShippingResult) => (
      <Space size="middle">
        <Button>Match</Button>
      </Space>
    ),
  },
];





let tagColorMap: Map<string, string> = new Map<string, string>();
tagColorMap.set('Match', 'green');
tagColorMap.set('unMatch', 'red');


class Admin extends React.Component<{}, { excelData: Array<ShippingResult> }> {

  constructor(props: {}) {
    super(props);
    this.state = {
      excelData: Array<ShippingResult>()
    }
  }

  handleBtnClick() {
    query().then(r => {
      this.setState({excelData: r});
    });
  }

  onMatchBtnClick(this: any, record: ShippingResult) {
    const excelDatas = this.state.excelData;
    const target = excelDatas.filter((item: { itemId: string; }) => item.itemId === record.itemId)[0];
    if (target){
      target.tag= 'Match';
      this.setState({excelData: excelDatas});
    }
  }


  render() {
    return (
      <div>
        <Button onClick={this.handleBtnClick.bind(this)}>Refresh</Button>
        <Table columns={columns} dataSource={this.state.excelData} rowKey={"itemId"}/>
      </div>);
  }
}

export default Admin;


// export default (): React.ReactNode => {
//   const intl = useIntl();
//   return (
//     <PageHeaderWrapper
//       content={intl.formatMessage({
//         id: 'pages.admin.subPage.title',
//         defaultMessage: 'This page can only be viewed by admin',
//       })}
//     >
//       <Card>
//         <Alert
//           message={intl.formatMessage({
//             id: 'pages.welcome.alertMessage',
//             defaultMessage: 'Faster and stronger heavy-duty components have been released.',
//           })}
//           type="success"
//           showIcon
//           banner
//           style={{
//             margin: -12,
//             marginBottom: 48,
//           }}
//         />
//         <Typography.Title level={2} style={{ textAlign: 'center' }}>
//           <SmileTwoTone /> Ant Design Pro <HeartTwoTone twoToneColor="#eb2f96" /> You
//         </Typography.Title>
//       </Card>
//       <p style={{ textAlign: 'center', marginTop: 24 }}>
//         Want to add more pages? Please refer to{' '}
//         <a href="https://pro.ant.design/docs/block-cn" target="_blank" rel="noopener noreferrer">
//           use block
//         </a>
//         。
//       </p>
//     </PageHeaderWrapper>
//   );
// };
